<template>
  <div class="login-container">
    <div class="logo" />
    <div class="form">
      <div class="ziti">智慧园区-登录</div>
      <!-- 卡片 -->
      <el-card shadow="never" class="login-card">
        <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
          <el-form-item prop="username">
            <h3>账号</h3>

            <el-input v-model="loginForm.username" />
          </el-form-item>
          <el-form-item prop="password">
            <h3>密码</h3>

            <el-input v-model="loginForm.password" show-password />
          </el-form-item>
          <el-form-item prop="uuid">
            <h3>模型uuid:</h3>
            <el-input v-model="loginForm.uuid" show-password />
          </el-form-item>
          <el-form-item prop="remember">
            <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="width:350px" type="primary" @click="getLogin">登录</el-button>
          </el-form-item>
        </el-form>
        <p class="tips">仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！</p>
      </el-card>
    </div>
  </div>
</template>

<script>
const InfoKey = 'kai_zj_info'
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: process.env.NODE_ENV ? 'Hmzs%001' : '',
        uuid: process.env.NODE_ENV ? '66ea8d2a-7416-4be5-ba7e-c030cf88b3f3' : '',
        remember: false
      },
      loginRules: {
        username: [
          { required: true, message: '请输入用户名!', trigger: ['blur'] },
          { min: 4, max: 11, message: '用户名的数量应在4-11之间', trigger: ['blur'] }
        ],
        password: [
          { required: true, message: '请输入密码!', trigger: ['blur'] },
          { min: 6, max: 11, message: '密码的数量应在6-11之间', trigger: ['blur'] }
        ],
        uuid: [
          { required: true, message: 'uuid', trigger: ['blur'] }
        ]
      }
    }
  },
  created() {
    const userPassObj = JSON.parse(localStorage.getItem(InfoKey))
    if (userPassObj) {
      this.loginForm = userPassObj
    }
  },
  methods: {
    async getLogin() {
      try {
        await this.$refs.loginRef.validate()
        console.log(222)
        const { username, password } = this.loginForm
        await this.$store.dispatch('user/login', { username, password })
        if (this.loginForm.remember) {
          localStorage.setItem(InfoKey, JSON.stringify(this.loginForm))
        } else {
          localStorage.removeItem(InfoKey)
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .login-container {
    display: flex;
    align-items: stretch;
    height: 100vh;
    .logo {
      flex: 3;
      background: rgba(38, 72, 176) url(https://fe-hmzs-tj.itheima.net/assets/login-bg-e4ea539c.svg)
        no-repeat center / cover;
      border-top-right-radius: 60px;
    }
    .form {
      flex: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 176px;
      .el-card {
        border: none;
        padding: 0;
      }
      .ziti {
        padding-left: 20px;
        font-size: 24px;
      }
      ::v-deep .el-input {
        width: 350px;
        height: 44px;
        .el-input__inner {
          background: #f4f5fb;
        }
      }
      .el-checkbox {
        color:#606266;
      }
    }
    .tips {
      width: 350px;
      font-size: 14px;
      color: red;
      letter-spacing: 2px;
    }
  }
</style>
